<template>
  <div class="app-container">
    <el-card>
      <div slot="header" class="clearfix">
        <span>{{ form.id ? '编辑供货协议' : '新建供货协议' }}</span>
      </div>

      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <!-- 基础信息区域 -->
        <div class="form-header">基础信息</div>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="协议编码" prop="frameworkCode">
              <el-input v-model="form.frameworkCode" placeholder="系统可自动生成或手动填写" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="协议状态" prop="status">
              <el-select v-model="form.status" placeholder="请选择">
                <el-option v-for="opt in statusOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="收货公司" prop="receiverCompanyName">
              <el-input v-model="form.receiverCompanyName" placeholder="请输入收货公司" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发货公司" prop="senderCompanyName">
              <el-input v-model="form.senderCompanyName" placeholder="请输入发货公司" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="收货部门" prop="receiverDeptName">
              <el-input v-model="form.receiverDeptName" placeholder="请输入收货部门" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发货部门" prop="senderDeptName">
              <el-input v-model="form.senderDeptName" placeholder="请输入发货部门" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="收货仓库" prop="receiverWarehouseName">
              <el-input v-model="form.receiverWarehouseName" placeholder="请输入收货仓库" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发货仓库" prop="senderWarehouseName">
              <el-input v-model="form.senderWarehouseName" placeholder="请输入发货仓库" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="收货联系人" prop="receiverContact">
              <el-input v-model="form.receiverContact" placeholder="请输入收货联系人" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收货电话" prop="receiverPhone">
              <el-input v-model="form.receiverPhone" placeholder="请输入收货联系电话" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="发货联系人" prop="senderContact">
              <el-input v-model="form.senderContact" placeholder="请输入发货联系人" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发货电话" prop="senderPhone">
              <el-input v-model="form.senderPhone" placeholder="请输入发货联系电话" />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 时间配置 -->
        <div class="form-header">时间配置</div>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="生效时间" prop="businessStartDate">
              <el-date-picker v-model="form.businessStartDate" type="date" value-format="yyyy-MM-dd" placeholder="请选择生效日期" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="到期时间" prop="businessEndDate">
              <el-date-picker v-model="form.businessEndDate" type="date" value-format="yyyy-MM-dd" placeholder="请选择到期日期" />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 业务配置 -->
        <div class="form-header">业务配置</div>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="要货提前期(小时)" prop="leadTimeHours">
              <el-input-number v-model="form.leadTimeHours" :min="0" :max="240" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="打印机ID" prop="printerId">
              <el-input v-model="form.printerId" placeholder="请输入打印机ID" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="箱标模板" prop="boxLabelTemplate">
              <el-input v-model="form.boxLabelTemplate" placeholder="请选择模板或填写" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="看板模板" prop="kanbanTemplate">
              <el-input v-model="form.kanbanTemplate" placeholder="请选择模板或填写" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="需确认协议" prop="needSenderConfirmFramework">
              <el-switch v-model="form.needSenderConfirmFramework" :active-value="1" :inactive-value="0" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="需确认看板" prop="needSenderConfirmKanban">
              <el-switch v-model="form.needSenderConfirmKanban" :active-value="1" :inactive-value="0" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="当做送货单" prop="deliveryAsReceipt">
              <el-switch v-model="form.deliveryAsReceipt" :active-value="1" :inactive-value="0" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收货扫码要求" prop="scanRequirement">
              <el-select v-model="form.scanRequirement" placeholder="请选择">
                <el-option label="必须扫码" :value="1" />
                <el-option label="建议扫码" :value="2" />
                <el-option label="不要求" :value="0" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 操作按钮区域 -->
        <div class="form-header">操作</div>
        <el-form-item>
          <el-button type="primary" @click="submitForm">保存草稿</el-button>
          <el-button type="success" @click="submitConfirm">提交确认</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { addSupplyFramework, updateSupplyFramework, getSupplyFramework } from '@/api/kanban/supplyFramework'

export default {
  name: 'SupplyFrameworkEdit',
  data() {
    return {
      loading: false,
      form: {
        id: undefined,
        frameworkCode: undefined,
        status: 10,
        receiverCompanyName: undefined,
        senderCompanyName: undefined,
        receiverDeptName: undefined,
        senderDeptName: undefined,
        receiverWarehouseName: undefined,
        senderWarehouseName: undefined,
        receiverContact: undefined,
        receiverPhone: undefined,
        senderContact: undefined,
        senderPhone: undefined,
        businessStartDate: undefined,
        businessEndDate: undefined,
        leadTimeHours: 0,
        printerId: undefined,
        boxLabelTemplate: undefined,
        kanbanTemplate: undefined,
        needSenderConfirmFramework: 0,
        needSenderConfirmKanban: 0,
        deliveryAsReceipt: 0,
        scanRequirement: 0
      },
      rules: {
        frameworkCode: [{ required: true, message: '请输入协议编码', trigger: 'blur' }],
        receiverCompanyName: [{ required: true, message: '请输入收货公司', trigger: 'blur' }],
        senderCompanyName: [{ required: true, message: '请输入发货公司', trigger: 'blur' }],
        businessStartDate: [{ required: true, message: '请选择生效时间', trigger: 'change' }],
        businessEndDate: [{ required: true, message: '请选择到期时间', trigger: 'change' }]
      },
      statusOptions: [
        { label: '草稿', value: 10 },
        { label: '待确认', value: 20 },
        { label: '生效', value: 30 },
        { label: '已过期', value: -20 },
        { label: '已作废', value: -10 }
      ]
    }
  },
  created() {
    const id = this.$route.query.id
    if (id) {
      this.loading = true
      getSupplyFramework(id).then(res => {
        this.form = Object.assign(this.form, res.data || {})
      }).finally(() => { this.loading = false })
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (!valid) return
        const req = this.form.id ? updateSupplyFramework(this.form) : addSupplyFramework(this.form)
        req.then(() => {
          this.$message.success('保存成功')
          this.$router.push({ path: '/kanban/supplyFramework/index' })
        })
      })
    },
    submitConfirm() {
      this.$refs.form.validate(valid => {
        if (!valid) return
        const payload = { ...this.form, status: 20 }
        const req = this.form.id ? updateSupplyFramework(payload) : addSupplyFramework(payload)
        req.then(() => {
          this.$message.success('已提交确认')
          this.$router.push({ path: '/kanban/supplyFramework/index' })
        })
      })
    },
    cancel() {
      this.$router.back()
    }
  }
}
</script>

<style scoped>
.form-header {
  font-size: 15px;
  color: #6379bb;
  border-bottom: 1px solid #ddd;
  margin: 8px 10px 25px 10px;
}
</style>